<template>
  <div class="content" ref="content">

    <el-form
      :model="defaultData"
      size="small"
      class="form-block"
      ref="queryForm"
      :inline="inline"
      :dictList="listTypeInfo"
      label-width="130px"

    >
    <el-row :gutter="10">
      <template v-for="(item, index) in fieldList">
        <el-col  :span="item.span ? item.span : Number.parseInt(24/fieldList.length)">
        <div :key="index">
          <div class="item-style">
            <el-form-item :label="item.label">
              <!--插槽-->
              <template v-if="item.type === 'slot'">
                <slot :name="'filter-' + item.field" />
              </template>
              <!-- 普通输入框 -->
              <el-input
                v-if="item.type === 'input' && !item.hidden"
                v-model.trim="defaultData[item.field]"
                :type="item.type"
                :disabled="item.disabled"
                :placeholder="getPlaceholder(item)"
                @keyup.enter.native="handleSearch"
                @blur="handleEvent($event, item.field)"
              />
              <!-- 日期/时间 -->
              <el-date-picker
                v-if="item.type === 'date'"
                v-model="defaultData[item.field]"
                :type="item.dateType"
                :picker-options="item.TimePickerOptions"
                :clearable="item.clearable"
                :disabled="item.disabled"
                :default-time="item.defaultTime"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :placeholder="getPlaceholder(item)"
                @change="handleEvent($event, item.field, 'change')"
              />
              <!--    日期区间选择器    -->
              <el-date-picker
                style="width: 100%"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-if="item.type == 'dateRange'"
                v-model="defaultData[item.field]"
                :default-time="['00:00:00', '23:59:59']"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="handleEvent($event, item.field, 'change')"
              >
              </el-date-picker>
              <!-- 选择框 -->
              <el-select
                v-if="item.type === 'select'"
                v-model="defaultData[item.field]"
                :disabled="item.disabled"
                :clearable="item.clearable"
                filterable
                :multiple="item.multiple"
                :placeholder="getPlaceholder(item)"
                @change="handleEvent($event, item.field, 'change')"
              >
                <el-option
                  v-for="(childItem, childIndex) in listTypeInfo[item.list]"
                  :key="childIndex"
                  :label="childItem.label"
                  :value="setBindValue(childItem)"
                  :disabled="childItem.disabled"
                />
              </el-select>
              <!-- 计数器 -->
              <el-input-number
                v-if="item.type === 'inputNumber'"
                v-model="defaultData[item.field]"
                controls-position="right"
                :min="item.min"
                :max="item.max"
                @change="handleEvent($event, item.field, 'change')"
              />
            </el-form-item>
          </div>
        </div>
      </el-col>
      </template>
      <el-col :span="4" v-if="!btnHidden" style="margin-top: 20px">
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-search"
        :disabled="defaultData.searchBtn"
        @click="handleSearch"
        >搜索
      </el-button>
      <el-button
        class="bt-class"
        size="mini"
        icon="el-icon-refresh"
        :disabled="defaultData.resetBtn"
        @click="handleReset"
        >重置
      </el-button>
    </el-col>
    </el-row>
    </el-form>
<slot/>
    <!--    <div
      v-if="fieldList.length > colCount"
      :class="['semicircle', icon === 'close' ? 'down' : '']"
      @click="icon === 'open' ? (icon = 'close') : (icon = 'open')"
    >
      <i class="el-icon-arrow-up"/>
    </div>-->
  </div>
</template>
<script>
import { cloneDeep } from "@/utils/loadash-es";

export default {
  name: "searchForm",
  props: {

    /**字段默认数据 */
    data: {
      type: Object,
      default: () => {},
    },
    /**字段配置项 */
    fieldList: {
      type: Array,
      default: () => [],
    },
    /**相关的列表 */
    listTypeInfo: {
      type: Object,
      default: () => {},
    },
    /**是否隐藏操作按钮 */
    btnHidden: {
      type: Boolean,
      default: false,
    },
    /**searchBtn 是否禁用 */
    searchBtn: {
      type: Boolean,
      default: false,
    },
    /**重置按钮 */
    resetBtn: {
      type: Boolean,
      default: false,
    },
    /**搜索数量 */
    count: {
      type: [Number, String],
      default: 4,
    },
    isNeedResetExtraParam: {
      type: Boolean,
      default: false,
    },
    inline: {
      type: Boolean,
      default:true
    }
  },
  computed: {

  },
  data() {
    return {
      defaultData: {},
      icon: "close",
      colCount: null, // 每行的列数量
      defaultKeyList: [], //组件内置操作框key数组，用于watch更新
    };
  },
  watch: {
    data: {
      handler(val) {
        let resolveVal = cloneDeep(val);
        for (let key in resolveVal) {
          if (resolveVal[key] !== null) {
            // if (this.defaultKeyList.indexOf(key) > 0) {
            this.defaultData[key] = cloneDeep(resolveVal[key]);
            // }
          }
        }
      },
      deep: true,
    },
  },

  mounted() {
    /**
     * 子组件无法直接修改父组件传递过来的值
     * 于是将父组件传递的值首先赋值给 defaultData
     * 在搜索条件中同样使用 defaultData
     * 永远保持 props 传递的 data 纯洁度
     */
    this.defaultData = { ...this.data };

    this.setColCount();
    // window.addEventListener('resize', this.setColCount);
  },

  beforeDestroy() {
    // window.removeEventListener('resize', this.setColCount);
  },

  methods: {
    /**
     * 设置 每行的列数量
     */
    setColCount() {
      let ref = this.$refs.content;
      let styleAttr = window.getComputedStyle(ref, null);
      let width = Number.parseInt(styleAttr["width"]);
      let pl = Number.parseInt(styleAttr["padding-left"]);
      let pr = Number.parseInt(styleAttr["padding-right"]);
      // 332 每个输入组件 宽度332 暂时写死
      this.colCount = Math.ceil((width - pl - pr) / 332);
    },
    setvalueModel(val) {
      return val;
    },
    /**
     * 设置 绑定select 的值
     */
    setBindValue(item) {
      let value = item?.value ?? item?.id;
      return value;
    },
    /**
     * @func 占位符显示
     * @param {Object} row
     * @desc 📝
     */
    getPlaceholder(row) {
      let placeholder;
      if (row.label) {
        if (row.type === "input") {
          placeholder = "请输入" + row.label;
        } else if (
          row.type === "select" ||
          row.type === "time" ||
          row.type === "date"
        ) {
          placeholder = "请选择" + row.label;
        } else {
          placeholder = row.label;
        }
      } else {
        if (row.type === "input") {
          placeholder = "请输入"
        } else if (
          row.type === "select" ||
          row.type === "time" ||
          row.type === "date"
        ) {
          placeholder = "请选择"
        }
      }
      return placeholder;
    },
    /**
     * @func 事件处理
     * @desc 📝
     */
    handleEvent(event, val, change) {
      this.defaultKeyList.indexOf(val) < 0 && this.defaultKeyList.push(val);
      let obj = {
        value: change === "change" ? event : event.target.value,
        field: val,
      };
      this.$emit("handleEvent", obj);
    },

    /**
     * @func 搜索
     * @desc 📝
     */
    handleSearch() {
      this.$emit("handleSearch", this.defaultData);
    },

    /**
     * @func 重置
     * @desc 📝
     */
    handleReset() {
      // 防止重置额外参数
      if (this.isNeedResetExtraParam) {
        this.fieldList.forEach((o) => (this.defaultData[o.value] = null));
      } else {
        for (let key in this.defaultData) {
          this.defaultData[key] = null;
        }
      }
      this.$emit("handleReset", this.defaultData);
    },
  },
};
</script>
<style lang="scss" scoped>
.el-input,
.el-select,
.el-date-editor,
.el-cascader,
.el-autocomplete,
.el-input-number {
  width: auto;
}

.el-form-item__label {
  display: block;
}

.content {
  padding-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  align-items: flex-end;
.el-form{
  width: 100%;
  .el-row{
    width:100%;

  }
}
  .item-style {
    margin: 0 auto;
    line-height: 1;
    display: flex;
    align-items: center;

    .label-style {
      display: inline-block;
      justify-self: end;
      width: 100px;
      font-size: 13px;
      white-space: nowrap;
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      text-align: right;
      margin-right: 12px;
      color: #222222;
    }
  }

  // &:hover .semicircle {
  //     display: block;
  // }

  .semicircle {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 36px;
    height: 16px;
    text-align: center;
    color: #999999;
    background-color: #ffffff;
    box-shadow: 0px -3px 8px 0px rgba(29, 58, 102, 0.08);
    border: 1px solid #e8e8e8;
    border-radius: 100px 100px 0 0;

    &:hover {
      cursor: pointer;
      color: #409eff;
    }
  }

  .down {
    bottom: -16px;
    border-radius: 0 0 100px 100px;

    & > i {
      position: absolute;
      left: -1px;
      right: 0;
      top: -3px;
      margin: auto;
      transform: rotate(180deg);
    }
  }

  .form-block {
    //flex:1;
    display: flex;
    flex-wrap: wrap;

  }
}
::v-deep{
  .el-col{

    max-width: 240px !important;

  }
  .el-form-item{
    width: 100%;

  }
  .el-input__inner{
    padding: 0 5px;
  }
  .el-form-item__content{
      width: 100%;
      &>*{
        width: 100%;
      }
    }
}
</style>
